<script setup>

</script>
<template >
<div class="container">
	<!-- 舞台层 -->
	<div class="stage">
		<!-- 控制层 -->
		<div class="control">
			<!-- 图片层 -->
			<div class="imgWrap">
				<div class="img img1"><img src="../../image/R-C.jpg"></div>
				<div class="img img2"><img src="../../image/R-C1.jpg"></div>
				<div class="img img3"><img src="../../image/R-C2.jpg"></div>
				<div class="img img4"><img src="../../image/R-C3.jpg"></div>
				<div class="img img5"><img src="../../image/R-C4.jpg"></div>
				<div class="img img6"><img src="../../image/R-C5.jpg"></div>
				<div class="img img7"><img src="../../image/R-C6.jpg"></div>
				<div class="img img8"><img src="../../image/R-C7.jpg"></div>
			</div>
		</div>
	</div>
</div>

</template>
<style scoped lang="scss">
$imgCount : 8;
html, body {
	background: #000;
}

.container{
	position:relative;
}

.stage{
	position:relative;
	width: 1000px;
	height: 240px;
	margin: 20px auto;
	perspective:2000px;
	transform-style: preserve-3d;
	-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .5));
	
	.control{
		position:relative;
		width:100%;
		height:100%;
		transform-style: preserve-3d;
		transform: translateZ(-3000px) rotateY(50deg) rotateZ(0deg);
		animation:rotate 30s linear infinite;
		
		.imgWrap{
			position:absolute;
			width:800px;
			height:800px;
			top:50%;
			left:50%;
			transform:translate(-50%, -50%);
			transform-style: preserve-3d;
			
			.img{
				position:absolute;
				width:750px;
				height:600px;
				line-height:400px;
				text-align:center;
				font-size:120px;
				top:0;
				left:0;
				transform-style: preserve-3d;
				transform-origin: 50% 50% 0px;
			}
			
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			@for $i from 1 through $imgCount{
				.img#{$i}{
					// transform: rotateY(35 + ($i * 45deg)) translateZ(482.84px) ;
					transform: rotateY(35 + ($i * 45deg)) translateZ(900px) ;
				}
			}
		}
	}
}

@keyframes rotate{
	0%{
		transform: translateZ(-2000px) rotateY(0deg);
	}
	50%{
		transform: translateZ(-2000px) rotateY(-360deg);
	}
	100%{
		transform: translateZ(-2000px) rotateY(-720deg);
	}
}
</style>